import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import SocialsSection from '../../ch/sections/SocialsSection.vue'

<Meta title="Sections/Content/Socials" component={SocialsSection} />

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { SocialsSection },
  template: '<SocialsSection :section-title="sectionTitle" :section-desc="sectionDesc" :feeds="feeds" />',
})

# Socials Section

Socials section is used to tease the different social channels. Each card contains the following:
- A title,
- A link,
- A hand picked post or video, or the last Tweet for Twitter feed.

## Example with 1 card

<Canvas>
  <Story
    name="Example with 1 card"
    args={{
      sectionTitle: 'Geoportal in den sozialen Medien',
      sectionDesc: "Hier die aktuellsten Posts. Wenn Sie mehr erfahren möchten, besuchen Sie bitte die jeweiligen Kanäl.",
      feeds: [
        {
          type: "facebook",
          title: "News on Facebook",
          pofileURL: "https://www.facebook.com/swisstopo",
          feedURL: "https://www.facebook.com/swisstopo/videos/5455503121148000/",
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Example with 2 cards

<Canvas>
  <Story
    name="Example with 2 cards"
    args={{
      sectionTitle: 'Geoportal in den sozialen Medien',
      sectionDesc: "Hier die aktuellsten Posts. Wenn Sie mehr erfahren möchten, besuchen Sie bitte die jeweiligen Kanäl.",
      feeds: [
        {
          type: "facebook",
          title: "News on Facebook",
          pofileURL: "https://www.facebook.com/swisstopo",
          feedURL: "https://www.facebook.com/swisstopo/videos/5455503121148000/",
        },
        {
          type: "instagram",
          title: "Insights on Instagram",
          pofileURL: "https://www.instagram.com/swisstopo/",
          feedURL: "https://www.instagram.com/p/Cd6KkQsOnOh/?utm_source=ig_web_copy_link"
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Example with 3 cards

<Canvas>
  <Story
    name="Example with 3 cards"
    args={{
      sectionTitle: 'Geoportal in den sozialen Medien',
      sectionDesc: "Hier die aktuellsten Posts. Wenn Sie mehr erfahren möchten, besuchen Sie bitte die jeweiligen Kanäl.",
      feeds: [
        {
          type: "facebook",
          title: "News on Facebook",
          pofileURL: "https://www.facebook.com/swisstopo",
          feedURL: "https://www.facebook.com/swisstopo/videos/5455503121148000/",
        },
        {
          type: "instagram",
          title: "Insights on Instagram",
          pofileURL: "https://www.instagram.com/swisstopo/",
          feedURL: "https://www.instagram.com/p/Cd6KkQsOnOh/?utm_source=ig_web_copy_link"
        },
        {
          type: "youtube",
          title: "Investigations on Youtube",
          pofileURL: "https://www.youtube.com/c/SwissGeoportal",
          feedURL: "https://www.youtube.com/embed/BR5zDpPDKFM"
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Example with 4 cards

<Canvas>
  <Story
    name="Example with 4 cards"
    args={{
      sectionTitle: 'Geoportal in den sozialen Medien',
      sectionDesc: "Hier die aktuellsten Posts. Wenn Sie mehr erfahren möchten, besuchen Sie bitte die jeweiligen Kanäl.",
      feeds: [
        {
          type: "facebook",
          title: "News on Facebook",
          pofileURL: "https://www.facebook.com/swisstopo",
          feedURL: "https://www.facebook.com/swisstopo/videos/5455503121148000/",
        },
        {
          type: "instagram",
          title: "Insights on Instagram",
          pofileURL: "https://www.instagram.com/swisstopo/",
          feedURL: "https://www.instagram.com/p/Cd6KkQsOnOh/?utm_source=ig_web_copy_link"
        },
        {
          type: "youtube",
          title: "Investigations on Youtube",
          pofileURL: "https://www.youtube.com/c/SwissGeoportal",
          feedURL: "https://www.youtube.com/embed/BR5zDpPDKFM"
        },
        {
          type: "twitter",
          title: "Press-resleases on Twitter",
          pofileURL: "https://twitter.com/swiss_geoportal",
          feedURL: "https://twitter.com/swiss_geoportal"
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Example with 5 cards

<Canvas>
  <Story
    name="Example with 5 cards"
    args={{
      sectionTitle: 'Geoportal in den sozialen Medien',
      sectionDesc: "Hier die aktuellsten Posts. Wenn Sie mehr erfahren möchten, besuchen Sie bitte die jeweiligen Kanäl.",
      feeds: [
        {
          type: "facebook",
          title: "News on Facebook",
          pofileURL: "https://www.facebook.com/swisstopo",
          feedURL: "https://www.facebook.com/swisstopo/videos/5455503121148000/",
        },
        {
          type: "instagram",
          title: "Insights on Instagram",
          pofileURL: "https://www.instagram.com/swisstopo/",
          feedURL: "https://www.instagram.com/p/Cd6KkQsOnOh/?utm_source=ig_web_copy_link"
        },
        {
          type: "youtube",
          title: "Investigations on Youtube",
          pofileURL: "https://www.youtube.com/c/SwissGeoportal",
          feedURL: "https://www.youtube.com/embed/BR5zDpPDKFM"
        },
        {
          type: "twitter",
          title: "Press-resleases on Twitter",
          pofileURL: "https://twitter.com/swiss_geoportal",
          feedURL: "https://twitter.com/swiss_geoportal"
        },
        {
          type: "linkedIn",
          title: "Post on LinkedIn",
          pofileURL: "https://www.linkedin.com/company/swisstopo/",
          feedURL: "https://www.linkedin.com/company/swisstopo/"
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Example with 6 cards

6 cards are the maximum amount of cards displayable in the socials section.

<Canvas>
  <Story
    name="Example with 6 cards"
    args={{
      sectionTitle: 'Geoportal in den sozialen Medien',
      sectionDesc: "Hier die aktuellsten Posts. Wenn Sie mehr erfahren möchten, besuchen Sie bitte die jeweiligen Kanäl.",
      feeds: [
        {
          type: "facebook",
          title: "News on Facebook",
          pofileURL: "https://www.facebook.com/swisstopo",
          feedURL: "https://www.facebook.com/swisstopo/videos/5455503121148000/",
        },
        {
          type: "instagram",
          title: "Insights on Instagram",
          pofileURL: "https://www.instagram.com/swisstopo/",
          feedURL: "https://www.instagram.com/p/Cd6KkQsOnOh/?utm_source=ig_web_copy_link"
        },
        {
          type: "youtube",
          title: "Investigations on Youtube",
          pofileURL: "https://www.youtube.com/c/SwissGeoportal",
          feedURL: "https://www.youtube.com/embed/BR5zDpPDKFM"
        },
        {
          type: "twitter",
          title: "Press-resleases on Twitter",
          pofileURL: "https://twitter.com/swiss_geoportal",
          feedURL: "https://twitter.com/swiss_geoportal"
        },
        {
          type: "twitter",
          title: "Press-releases on Twitter",
          pofileURL: "https://twitter.com/swiss_geoportal",
          feedURL: "https://twitter.com/swiss_geoportal"
        },
        {
          type: "linkedIn",
          title: "Post on LinkedIn",
          pofileURL: "https://www.linkedin.com/company/swisstopo/",
          feedURL: "https://www.linkedin.com/company/swisstopo/"
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>



<a href="?path=/story/sections-socials--example">
  Go to the Canvas Tab
</a>

---

<a href="?id=sections-content-socials--example&viewMode=story" target="_blank">
  Open page in full width in a new tab
</a>
